<template>
  <div class="container-app">
    <div style="margin-bottom:15px;">
      <span class="right-search">
        <el-input @change="findLine" v-model="findData" size="small" placeholder="输入关键字搜索" style="width:300px;">
          <el-button @click="findLine" slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </span>
    </div>
    <el-table @selection-change="getRow" :data="tableData" tooltip-effect="dark" style="width: 100%" border>
      <el-table-column type="index" align="center" width="50" label="序号"></el-table-column>
      <el-table-column prop="requestId" label="请求ID" width="120"></el-table-column>
      <el-table-column prop="username" align="center" label="用户名"></el-table-column>
      <el-table-column prop="id" label="登录IP"></el-table-column>
      <el-table-column prop="area" align="center" label="区域"></el-table-column>
      <el-table-column prop="operator" align="center" label="运营商"></el-table-column>
      <el-table-column prop="type" align="center" label="登录类型">
      	<template slot-scope="scope">
          <span v-if='scope.row.type ==1'>登录</span>
          <span v-else>退出</span>
        </template>
      </el-table-column>
      <el-table-column prop="type" align="center" label="是否成功">
        <template slot-scope="scope">
          <span v-if='scope.row.type ==true'>成功</span>
          <span v-else>失败</span>
        </template>
      </el-table-column>
      <el-table-column prop="code" align="center" label="响应码"></el-table-column>
      <el-table-column prop="exceptionMessage" label="失败消息记录"></el-table-column>
      <!-- <el-table-column prop="userAgent" label="浏览器"></el-table-column> -->
      <el-table-column prop="browserName" align="center" label="浏览器名称"></el-table-column>
      <el-table-column prop="browserVersion" label="浏览器版本" width="120"></el-table-column>
      <el-table-column prop="engineName" label="浏览器引擎名称"></el-table-column>
      <el-table-column prop="engineVersion" label="浏览器引擎版本"></el-table-column>
      <el-table-column prop="osName" align="center" label="系统名称"></el-table-column>
      <el-table-column prop="platformName" align="center" label="平台名称"></el-table-column>
      <el-table-column prop="mobile" align="center" label="是否手机">
        <template slot-scope="scope">
          <span v-if='scope.row.type ==true'>是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column prop="deviceName" align="center" label="设备名称"></el-table-column>
      <el-table-column prop="deviceModel" align="center" label="设备型号"></el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      <el-table-column prop="createtime" label="创建时间" width="80"></el-table-column>
    </el-table>
    <el-col :span="24" class="paging">
      <span>总条数：{{dataTotal}}</span>
      <el-pagination @current-change="changePage" :page-size="10" :total="dataTotal"
        background layout="prev, pager, next"
        style="float:right;"></el-pagination>
		</el-col>

  </div>
</template>

<script>
import { isvalidatemobile } from '@/utils/validate'
import { getLoginLogList } from '@/api/logTable'
export default {
  data() {
    return {
      dataPage: 1,
      dataTotal: 1,
      tableData: [],
      removeIds: [],
      findData: ''
    }
  },
  mounted() {
    this.getLoginLogList()
  },
  methods: {
    // 获取操作日志列表
    getLoginLogList() {
      const para = { keyword:'', pageIndex: 1, pageSize: 10 }
      getLoginLogList(para).then(res => {
        if (res.code == '200') {
          this.dataTotal = res.data.total
          this.tableData = res.data.records
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      })
    },
    changePage(val) {
      this.dataPage = val
      this.getLoginLogList()
    },
    getRow(selection) {
      this.removeIds = []
      selection.forEach(item => {
        this.removeIds.push(item.id)
      })
    },
    findLine() {
      const para = { row: 10, page: 1, keywords: this.findData }
      getLoginLogList(para).then(res => {
        if (res.code == '200') {
          this.dataTotal = res.datas.total
          this.tableData = res.datas.list
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      })
    },
  }
}
</script>

<style scoped>
.paging{
  padding: 15px;
  padding-right: 0;
}
.form-submit{
  margin: 0;
  padding-right: 30px;
}
</style>
